<script setup lang="ts">
const isOpen = ref(false);
const people = [
  { id: 1, label: "vue" },
  { id: 2, label: "python" },
  { id: 3, label: "typescript" },
  { id: 4, label: "java" },
];
const selected = ref<{
  id: number
  label: string
  group: string
  refIndex: number
}>();
const value = computed(() => (!selected.value ? "" : selected.value.label));
watch(selected, () => {
  console.log("selected.value", selected.value);
  isOpen.value = false;
  window.blur();
  if (selected.value)
    navigateTo(`/series-${selected.value.label}`);
});
</script>

<template>
  <ClientOnly>
    <UInput
      :value
      icon="i-ph-magnifying-glass"
      size="sm"
      color="white"
      placeholder="搜索..."
      trailing
      class="w-full max-w-[360px]"
      :onclick="
        () => {
          isOpen = true;
        }
      "
    />
    <UModal v-model="isOpen">
      <UCommandPalette
        v-model="selected"
        nullable
        :groups="[{ key: 'people', commands: people }]"
      />
    </UModal>
  </ClientOnly>
</template>

<style></style>
